<template>
  <div class="goodsContent">
    <ul class="menu">
      <li v-for="(item, index) in goods" :key="item.name">
        <a :href="'#' + index">{{ item.name }}</a>
      </li>
    </ul>
    <ol class="list">
      <li v-for="(item, index) in goods" :key="item.name">
        <!-- 列表标题 -->
        <h3 :id="index">{{ item.name }}</h3>
        <!-- 列表区 -->
        <ul class="info">
          <li v-for="food in item.foods" :key="food.name">
            <div class="box">
              <div class="pic">
                <img :src="food.image" alt="" />
              </div>
              <!-- 热销榜下面的列表 -->
              <div class="title">
                <p>{{ food.name }}</p>
                <p class="p2">{{ food.description }}</p>
                <p class="p1">月售1132份 好评率100%</p>
                <span>￥{{ food.price }}</span>
              </div>
              <!-- 按钮 -->
              <btns :item="food" type="0"></btns>
            </div>
          </li>
        </ul>
      </li>
    </ol>
    <div class="shopCar" @click="showCar">
      <span>¥{{ getPrice }}</span>
      <img src="../img/car.png" alt="">
      <span class="sp1">另需配送费 ¥4元</span>
      <span class="sp2">¥20起送</span>
    </div>
    
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Btns from "./btns.vue";

export default {
  data() {
    return {};
  },
  components: {
    Btns,
  },
  // 挂载
  mounted() {
    this.getGoods();
  },
  // 计算属性
  computed: {
    ...mapState(["goods", "price", "carList"]),
    getPrice() {
      let num = 0;
      this.carList.forEach((item) => {
        num += item.price * item.count;
      });
      return num;
    },
  },

  // 方法
  methods: {
    ...mapActions(["getGoods"]),
    add(food) {
      // food.count++;
      if (!food.count) {
        food.count = 1;
      } else {
        food.count++;
      }
      this.$store.commit("setCarList", {
        item: food,
      });
    },
    increment(food) {
      food.count--;
    },
    showCar() {
      this.$store.commit("showCar");
    },
  },
};
</script>

<style lang="less" scoped>
.goodsContent {
  display: flex;
  overflow: hidden;

  .menu {
    flex: 0 0 21.333vw;
    height: 118vw;
    overflow-y: scroll;
    margin-bottom: 13.333vw;

    li {
      padding: 3.2vw 3.2vw 0vw 3.2vw;
      height: 11.2vw;
      background-color: #f3f5f7;
      overflow: hidden;
      line-height: 4.967vw;

      a {
        display: block;
        height: 10.933vw;
        font-size: 3.2vw;
        // 换行
        white-space: wrap;
        color: #333;
        border-bottom: 0.133vw solid rgba(7, 17, 27, 0.1);
      }
    }
  }

  .list {
    flex: 1 1 auto;
    height: 67vh;
    margin-bottom: 13.333vw;
    overflow-y: scroll;

    h3 {
      border-left: 0.533vw #d9dde1 solid;
      background: #f3f5f7;
      height: 8.933vw;
      line-height: 8.933vw;
      padding-left: 3.733vw;
      color: rgb(147, 153, 159);
      font-size: 3.733vw;
    }

    .info li {
      padding: 0 2.4vw;
      position: relative;

      .box {
        display: flex;
        padding: 4.8vw 0 0 0;
        border-bottom: 0.133vw solid rgba(1, 17, 27, 0.1);

        .pic img {
          width: 16vw;
          height: 17.333vw;
          padding-bottom: 6.667vw;
        }

        .title {
          padding-left: 2.667vw;

          p {
            font-size: 3.733vw;
            color: rgb(7, 17, 27);
            line-height: 2.733vw;
            font-weight: bold;
          }

          .p1 {
            width: 37.333vw;
            color: rgb(147, 153, 159);
            line-height: 7.667vw;
            font-size: 1.667vw;
          }
          .p2 {
            color: rgb(147, 153, 159);
            line-height: 6.667vw;
            font-size: 1.667vw;
            margin-top: 1.333vw;
          }

          span {
            color: red;
            font-size: 3.733vw;
            font-weight: bold;
            line-height: 6.4vw;
          }
        }
      }
    }
  }

  .shopCar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14.8vw;
    background: #141d27;
    z-index: 1;
    color: #fff;
    span{
        font-size: 4.267vw;
        line-height:12.8vw;
        font-weight: bold;
        margin-left: 21.333vw;
        color: rgba(255, 255, 255, 0.4);
    }
    img{
        position: absolute;
        bottom: 4vw;
        left: 4.4vw;
        width: 12.733vw;
    }
    .sp1{
        margin-left: 3.2vw;
        font-weight: normal;
        font-size: 3.267vw;
    }
    .sp2{
        position: absolute;
        right:0vw;
        bottom: 0vw;
        width: 28vw;
        line-height:14.8vw;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        background-color: #2b343b;
    }
  }
}
</style>
